<template>
  <div class="container">
    <div class="header">
      <NavBar
        title="收货地址"
        left-arrow
        color="#333333"
        @click-left="back"
        @click-right="backHome"
      >
        <template #right>
          <Icon name="wap-home-o" size="20" />
        </template>
      </NavBar>
    </div>
    <div class="main">
      <Tabs
        v-model="active"
        title-active-color="#333333"
        title-inactive-color="#999999"
        color="#5652FF"
        sticky
        offset-top="54px"
        @change="tabChange"
      >
        <Tab title="我的地址">
          <List
            v-if="list.length > 0"
            v-model="loading"
            :finished="loadingEnd"
            finished-text=""
            @load="getList"
          >
            <div class="list">
              <div
                class="item"
                v-for="(item, idx) in list"
                :key="idx"
                v-longpress="deleteItem"
                :data-idx="idx"
              >
                <Shippinginfo :info="item"></Shippinginfo>
              </div>
            </div>
          </List>
        </Tab>
        <Tab title="收货仓库">
          <List
            v-if="list.length > 0"
            v-model="loading"
            :finished="loadingEnd"
            finished-text=""
            @load="getList"
          >
            <div class="list">
              <div
                class="item"
                v-for="(item, idx) in list"
                :key="idx"
                v-longpress="deleteItem"
                :data-idx="idx"
              >
                <Warehouse :info="item"></Warehouse>
              </div>
            </div>
          </List>
        </Tab>
      </Tabs>

      <Empty v-if="noData" description="暂无地址" />
    </div>
    <div class="footers" v-if="active == 0">
      <Button type="info" block @click="addOne">新增地址</Button>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, List, Empty, Button, Dialog, Tabs, Tab } from "vant";
import { addressList, getSendCangku, addressDelete } from "@/model/api";
import Shippinginfo from "@/components/Shippinginfo/Shippinginfo";
import Warehouse from "@/components/Warehouse/Warehouse";
export default {
  components: {
    NavBar,
    Icon,
    Shippinginfo,
    List,
    Empty,
    Button,
    Dialog,
    Tabs,
    Tab,
    Warehouse,
  },
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      noData: false,
      loadingEnd: false,
      active: 0,
    };
  },
  methods: {
    tabChange() {
      this.list.splice(0);
      this.total = 0;
      this.getList(true);
    },
    async getList(refresh = false) {
      if (this.active == 0) {
        let { code, data } = await addressList({
          start: 0,
        });
        this.loading = false;
        this.loadingEnd = true;
        if (code == 1) {
          this.list = data;
        }
        this.noData = this.list.length == 0;
      } else if (this.active == 1) {
        let { code, data } = await getSendCangku();
        this.loading = false;
        this.loadingEnd = true;
        if (code == 1) {
          this.list = [data];
        }
        this.noData = this.list.length == 0;
      }
    },
    addOne() {
      this.$router.push({
        name: "myaddressadd",
        query: {
          mode: 1,
        },
      });
    },
    deleteItem({ idx }) {
      Dialog.confirm({
        title: "提示",
        message: "确定要删除吗，删除后不可恢复",
      })
        .then(async () => {
          let { code, data, msg } = await addressDelete({
            id: this.list[idx].id,
          });
          if (code == 1) {
            this.getList();
            this.$toast({ message: msg, type: "success" });
          } else {
            this.$toast({ message: msg, type: "fail" });
          }
        })
        .catch(() => {});
    },
  },
  async created() {
    let { active = 0 } = this.$route.query;
    this.active = Number(active);
    this.getList();
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab--active {
  font-size: 0.36rem;
  font-weight: bold;
}

.footers {
  width: 100%;
  height: auto;
  padding: 5px 14px;
  position: fixed;
  left: 0;
  bottom: 0;
}

.list {
  width: 100%;
  height: auto;
  margin-top: 5px;

  .item {
    width: 100%;
    height: auto;
    padding: 0 14px;
    background-color: #fff;
    margin-bottom: 0.2rem;
  }
}
</style>
